<script setup>
import { ref } from "vue";
const emit = defineEmits(["loginSuccess"]);
import { loginByPhone } from "../../api/login";
//手机和手机验证码
const phone = ref("");
const phoneCode = ref("");
const err = ref({
  phone: "",
  phoneCode: "",
});

//初始化err数据
const initErr = () => {
  err.value = {
    phone: "",
    phoneCode: "",
  };
};

//验证码发送函数
const getCodes = () => {
  initErr();
  if (phone.value == "") {
    err.value.phone = "手机号不能为空";
    console.log(err.value);
  } else {
    console.log("发送验证码");
  }
};

//登录函数
const login = async () => {
  initErr();

  if (phone.value == "") {
    err.value.phone = "手机号不能为空";
  }
  if (phoneCode.value == "") {
    err.value.phoneCode = "验证码不能为空";
  }
  const res = await loginByPhone({
    phone: phone.value,
    code: phoneCode.value,
  });
  console.log(res);
  if (res.statusCode === 200) {
    console.log("登录成功");
    localStorage.setItem("loginState", "true");
    localStorage.setItem("token", res.data.token);

    emit("loginSuccess");
  } else {
    console.log("登陆失败:", err.value);
  }
};
</script>

<template>
  <div class="contain">
    <div class="top">
      <div class="hello">你好!</div>
      <div class="welcome">欢迎来到****,<a class="reg">立即注册</a></div>
    </div>

    <div class="func">
      <div class="phone">
        <span class="addressCode">+86</span>
        <input type="text" placeholder="请输入手机号" v-model="phone" />
        <div
          :style="
            err.phone != '' ? 'display: block;color:red' : 'display: none'
          "
        >
          {{ err.phone }}
        </div>
      </div>

      <div class="getCodes">
        <div class="line">
          <input type="text" placeholder="请输入验证码" v-model="phoneCode" />
          <button class="btn" @click="getCodes">获取验证码</button>
        </div>
        <div
          :style="
            err.phoneCode != '' ? 'display: block;color:red' : 'display: none'
          "
        >
          {{ err.phoneCode }}
        </div>
      </div>
    </div>

    <div class="loginBtn">
      <button class="login" @click="login">登录</button>
    </div>
  </div>
</template>

<style scoped lang="less">
.contain {
  padding: 1.4222rem 1.1222rem;

  .top {
    .hello {
      font-size: 0.5333rem;
      font-family: SourceHanSansCN;
      font-weight: 800;
    }

    .welcome {
      font-size: 0.4rem;
      line-height: 0.8889rem;
    }

    .reg {
      font-size: 0.4rem;
      font-weight: 600;
      color: black;

      border-bottom: 0.0333rem solid black;
    }
  }

  .func {
    margin-top: 1rem;
    padding: 0.1111rem;

    .phone,
    .getCodes {
      padding: 0.3333rem 0 0.3333rem 0.3333rem;
      border-bottom: 0.0111rem solid #cccccc;
      font-size: 0.2667rem;
    }

    input {
      outline: none;
      border: none;
    }

    .phone {
      .addressCode {
        margin-right: 0.5rem;
      }
    }

    .getCodes {
      .line {
        display: flex;
        justify-content: space-between;

        .btn {
          width: 1.6667rem;
          height: 0.5556rem;
          color: #4fb06b;
          background-color: white;
          border-radius: 0.2778rem;
          border: 0.0111rem solid #4fb06b;
        }
      }
    }
  }

  .loginBtn {
    text-align: center;

    .login {
      margin-top: 2.6111rem;
      font-size: 0.3111rem;
      width: 5.5556rem;
      height: 1rem;
      background-color: #149639;
      border: none;
      color: white;
      border-radius: 0.5rem;
    }
  }
}
</style>
